<template>
  <div class="screen" ref="screen">
    <div class="contentBox">
      <div class="header">
        <img src="../../assets/screen/screen-header.png" />
        <div class="time">
          <span>{{ currentTime }}</span
          ><span>{{ currentWeek }}</span>
        </div>
      </div>
      <img
        src="../../assets/screen/screen-full.png"
        @click="toggleFullScreen"
        class="full"
      />
      <div class="screen-top">
        <div class="screen-top-left">
          <div class="top-left-lt">
            <img src="../../assets/screen/screen-left.png" />
          </div>
          <div class="top-left-item">
            <img src="../../assets/screen/screen-zcdk.png" />
            <div class="data-info">
              <p class="data-info-title">资产地块</p>
              <p class="data-info-num">
                {{ (landareaInfo && landareaInfo.propertyNum) || 0 }}块
              </p>
            </div>
          </div>
          <div class="top-left-item">
            <img src="../../assets/screen/screen-jzmj.png" />
            <div class="data-info">
              <p class="data-info-title">建筑面积</p>
              <p class="data-info-num">
                {{
                  (buildingRegisterAreaInfo &&
                    buildingRegisterAreaInfo.buildingAreaAllTotal) ||
                  0
                }}㎡
              </p>
            </div>
          </div>
        </div>
        <div class="screen-top-middle">
          <img src="../../assets/screen/screen-top-bg.png" />
          <div class="screen-top-middle-info">
            <div class="info-item">
              <div class="item-style">
                <div class="info-item-num">
                  {{
                    (buildingRegisterAreaUseInfo &&
                      buildingRegisterAreaUseInfo.businessBuildingAreaAllTotal) ||
                    0
                  }}㎡
                </div>
                <div class="info-item-yellow">
                  <img src="../../assets/screen/screen-yellow-bg.png" />
                </div>
              </div>
              <div class="info-item-font">有偿租赁</div>
            </div>
            <div class="info-item">
              <div class="item-style">
                <div class="info-item-num">
                  {{
                    (buildingRegisterAreaUseInfo &&
                      (buildingRegisterAreaUseInfo.usageRate * 100).toFixed(
                        2
                      )) ||
                    0
                  }}%
                </div>
                <div class="info-item-blue">
                  <img src="../../assets/screen/screen-blue-bg.png" />
                </div>
              </div>
              <div class="info-item-font">使用率</div>
            </div>
            <div class="info-item">
              <div class="item-style">
                <div class="info-item-num">
                  <!-- {{
                    (buildingRegisterAreaUseInfo &&
                      buildingRegisterAreaUseInfo.freeAreaTotal) ||
                    0
                  }} -->
                  {{
                    (buildingRegisterAreaInfo &&
                      buildingRegisterAreaInfo.noBusinessBuildingAreaAllTotal) ||
                    0
                  }}㎡

                  <!-- <span>㎡</span> -->
                </div>
                <div class="info-item-yellow">
                  <img src="../../assets/screen/screen-yellow-bg.png" />
                </div>
              </div>
              <div class="info-item-font">无偿使用</div>
            </div>
          </div>
        </div>
        <div class="screen-top-right">
          <div class="top-left-item">
            <img src="../../assets/screen/screen-jzmjjy.png" />
            <div class="data-info">
              <p class="data-info-title">建筑面积（经营）</p>
              <p class="data-info-num">{{ jyxSum || 0 }}㎡</p>
            </div>
          </div>
          <div class="top-left-item">
            <img src="../../assets/screen/screen-jzmjfjy.png" />
            <div class="data-info">
              <p class="data-info-title">建筑面积（非经营）</p>
              <p class="data-info-num">{{ fjyxSum || 0 }}㎡</p>
            </div>
          </div>
          <div class="top-left-lt">
            <img src="../../assets/screen/screen-right.png" />
          </div>
        </div>
      </div>
      <div class="screen-bottom">
        <div class="screen-bottom-left">
          <div class="screen-title">
            <img src="../../assets/screen/screen-title.png" />
            <p>资产分析</p>
          </div>

          <div class="bottom-left-bottom">
            <div class="title title2">经营性资产类型</div>
            <div class="xx1">
              <img src="../../assets/screen/screen-xx.png" />
            </div>
            <div class="icon1 icon2">
              <img src="../../assets/screen/screen-jyx-icon.png" />
            </div>
            <div
              class="inner-chart pie-chart"
              id="pieChart"
              style="height: 25vh"
            ></div>
          </div>

          <div class="bottom-left-top">
            <div class="title">资产盘活</div>
            <div class="xx1">
              <img src="../../assets/screen/screen-xx.png" />
            </div>
            <div class="icon1">
              <img src="../../assets/screen/screen-jyx-icon.png" />
            </div>
            <div class="inner-chart" id="panelChart" style="height: 25vh"></div>
            <div class="bottom-left-top-inner">
              <div class="bottom-left-top-inner-left">
                <div class="num">
                  {{
                    (
                      (buildingRegisterAreaUseInfo &&
                        buildingRegisterAreaUseInfo.freeAreaTotal) +
                      (buildingRegisterAreaInfo &&
                        buildingRegisterAreaInfo.businessBuildingAreaAllTotal)
                    ).toFixed(2) || 0
                  }}㎡
                </div>
                <div class="label">可盘活面积</div>
              </div>
              <div class="bottom-left-top-inner-right">
                <div class="bottom-left-top-inner-right-item">
                  <p>待盘活面积</p>
                  <p>
                    {{
                      (buildingRegisterAreaUseInfo &&
                        buildingRegisterAreaUseInfo.freeAreaTotal) ||
                      0
                    }}㎡
                  </p>
                </div>
                <div class="bottom-left-top-inner-right-item">
                  <p>已盘活面积</p>
                  <p>
                    {{
                      (buildingRegisterAreaInfo &&
                        buildingRegisterAreaInfo.businessBuildingAreaAllTotal) ||
                      0
                    }}㎡
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen-bottom-middle">
          <div class="bottom-middle-top">
            <img
              src="../../assets/screen/screen-full.png"
              @click="dbClick"
              class="full"
            />
            <div id="mapContainer" />
          </div>
          <div class="bottom-middle-bottom">
            <div class="title1">经营性资产概况</div>
            <div class="xx">
              <img src="../../assets/screen/screen-xx.png" />
            </div>
            <div class="icon">
              <img src="../../assets/screen/screen-jyx-icon.png" />
            </div>
            <div class="inner-chart line-chart" id="3dLineChart"></div>
            <div class="banner">
              <img src="../../assets/screen/screen-ban-bg.png" />
            </div>
          </div>
        </div>
        <div class="screen-bottom-right">
          <div class="screen-title">
            <img src="../../assets/screen/screen-title.png" />
            <p>租赁分析</p>
          </div>
          <div class="bottom-right-top">
            <div class="title">租金概况</div>
            <div class="xx1">
              <img src="../../assets/screen/screen-xx.png" />
            </div>
            <div class="icon1">
              <img src="../../assets/screen/screen-jyx-icon.png" />
            </div>
            <div class="inner-info">
              <div class="inner-info-icon">
                <img src="../../assets/screen/screen-zujin-icon.png" />
              </div>
              <div class="inner-info-num">
                <span>租金总数</span
                ><span
                  >{{
                    (rentMount[0] && rentMount[0].rentAmount.toFixed(2)) || 0
                  }}万元</span
                >
              </div>
              <div class="inner-info-qushi">
                <img
                  src="../../assets/screen/screen-up.svg"
                  v-if="rentMount[0] && rentMount[0].rentAmountYearRate > 0"
                />
                <img
                  src="../../assets/screen/screen-low.svg"
                  v-if="rentMount[0] && rentMount[0].rentAmountYearRate < 0"
                />
                <div
                  class="low-up"
                  v-if="rentMount[0] && rentMount[0].rentAmountYearRate < 0"
                >
                  同比下降
                  {{
                    (
                      Math.abs(
                        rentMount[0] && rentMount[0].rentAmountYearRate
                      ) * 100
                    ).toFixed(2)
                  }}%
                </div>

                <div
                  class="low-up"
                  v-if="rentMount[0] && rentMount[0].rentAmountYearRate > 0"
                >
                  同比上升
                  {{
                    (
                      rentMount[0] && rentMount[0].rentAmountYearRate * 100
                    ).toFixed(2)
                  }}%
                </div>
              </div>
            </div>
            <div class="year-choose">
              <el-select
                v-model="value"
                :popper-append-to-body="false"
                size="mini"
                @change="yearChange"
              >
                <el-option
                  v-for="item in yearOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span style="color: #fff; padding-left: 5px">年</span>
            </div>
            <div class="inner-chart" id="lineChart"></div>
          </div>
          <div class="bottom-right-bottom">
            <div class="title title2">租户分析</div>
            <div class="xx1">
              <img src="../../assets/screen/screen-xx.png" />
            </div>
            <div class="icon1 icon2">
              <img src="../../assets/screen/screen-jyx-icon.png" />
            </div>
            <div class="inner-info">
              <div class="inner-info-icon">
                <img src="../../assets/screen/screen-zuhu-icon.png" />
              </div>
              <div class="inner-info-num">
                <span>有偿租赁户数</span><span>{{ getLeaseUserNum }}户</span>
              </div>
            </div>
            <div class="inner-chart" style="overflow-y: auto; height: 55%">
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <th>序号</th>
                  <th>租户</th>
                  <th>租金(万元)</th>
                </tr>
                <tr
                  class="line"
                  v-for="(item, index) in leaseUserList"
                  :key="index"
                >
                  <td class="num">
                    <span>{{ index + 1 }}</span>
                  </td>
                  <td class="name">{{ item.leaseUserName }}</td>
                  <td class="price">{{ item.rentAmountTotal }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { cockpitPropertyLandareaList } from "@/api/shops";

import * as echarts from "echarts";
import {
  cockpitBuildingRegister,
  leaseUserTotal,
  cockpitPropertyLandareaList,
  innerScreenPropertyList,
  innerScreenPropertyInfo,
  userList,
  rentYear,
  rentYearGroup,
} from "@/api/screen";
import { cockpitBuildingRegisterareaList } from "@/api/shops";

export default {
  data() {
    return {
      buildingRegisterAreaUseInfo: null,
      buildingRegisterAreaInfo: null,
      userTotalInfo: null,
      landareaInfo: null,
      classificationUnitList: [],
      leaseUserList: [],
      chartLine: null,
      chart3DLine: null,
      chartPie: null,
      chartPanel: null,
      styleType: "",
      map: null,
      value: new Date().getFullYear(),
      yearOptions: [],
      isFullScreen: false,
      currentDate: new Date(),
      rentYearList: [],
      rentInfo: [],
      rentMount: [],
      jyxSum: 0,
      fjyxSum: 0,
    };
  },
  mounted() {
    this.getCockpitBuildingRegister();
    this.getcockpitBuildingRegisterareaList();
    this.getLeaseUserTotal();
    this.getCockpitPropertyLandareaList();
    this.getInnerScreenPropertyList();
    this.getUserList();
    this.mapshow();
    this.initLoadMap();
    this.getRentYear();
    this.getRentYearGroup();
    this.getPanelChart();
  },
  created() {
    setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  },
  computed: {
    currentTime() {
      return this.formatDateTime(this.currentDate);
    },
    currentWeek() {
      return this.formatDateWeek(this.currentDate);
    },
    getLeaseUserNum() {
      let leaseUserFilter = this.leaseUserList.filter(
        (v) => v.rentAmountTotal > 0
      );

      return leaseUserFilter.length;
    },
  },
  methods: {
    formatDateTime(date) {
      return (
        date.getFullYear() +
        "-" +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        "-" +
        ("0" + date.getDate()).slice(-2) +
        " " +
        ("0" + date.getHours()).slice(-2) +
        ":" +
        ("0" + date.getMinutes()).slice(-2) +
        ":" +
        ("0" + date.getSeconds()).slice(-2)
      );
    },

    formatDateWeek(date) {
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let weekday = date.getDay();
      return weeks[weekday];
    },
    yearChange(val) {
      this.getRentYearGroup(val);

      this.rentMount = this.rentInfo.filter((v) => v.endYear == this.value);
    },
    //【NEW】租金情况下拉年份
    getRentYear() {
      rentYear().then((res) => {
        if (res.code == 200) {
          this.rentInfo = res.data;
          this.yearOptions = this.rentInfo.map((v) => {
            return {
              label: v.endYear,
              value: v.endYear,
            };
          });

          // 初始化
          this.getRentYearGroup(this.value);
          this.rentMount = this.rentInfo.filter((v) => v.endYear == this.value);
        }
      });
    },
    // 【NEW】租金情况
    getRentYearGroup(val) {
      let params = {
        endYear: val,
      };
      rentYearGroup(params).then((res) => {
        if (res.code == 200) {
          this.rentYearList = res.data;
          this.getLineChart();
        }
      });
    },

    getcockpitBuildingRegisterareaList() {
      let params = {
        propertyCategoryId: undefined,
        ownershipId: undefined,
        manageDeptId: undefined,
        propertyCommunity: undefined,
      };
      cockpitBuildingRegisterareaList(params).then((res) => {
        if (res.code == 200) {
          this.buildingRegisterAreaUseInfo = res.data;
          if (
            this.buildingRegisterAreaUseInfo.list &&
            this.buildingRegisterAreaUseInfo.list.length > 0
          ) {
            let jyx = this.buildingRegisterAreaUseInfo.list.filter(
              (v) => v.businessNature === 1
            );
            let fjyx = this.buildingRegisterAreaUseInfo.list.filter(
              (v) => v.businessNature === 0
            );
            if (jyx && jyx.length > 0) {
              this.jyxSum = jyx
                .map((v) => v.buildingAreaTotal)
                .reduce((sum, num) => {
                  return sum + num;
                })
                .toFixed(2);
              this.fjyxSum = fjyx
                .map((v) => v.buildingAreaTotal)
                .reduce((sum, num) => {
                  return sum + num;
                })
                .toFixed(2);
            }
          }
          // this.jzArea = this.buildingRegisterAreaUseInfo.filter((v) => v.businessNature === 1);
        }
      });
    },

    getCockpitBuildingRegister() {
      let params = {
        propertyCategoryId: undefined,
        ownershipId: undefined,
        manageDeptId: undefined,
        propertyCommunity: undefined,
      };
      cockpitBuildingRegister(params).then((res) => {
        if (res.code == 200) {
          this.buildingRegisterAreaInfo = res.data;
          this.$nextTick(() => {
            if (
              this.buildingRegisterAreaInfo &&
              this.buildingRegisterAreaInfo.list.length > 0
            ) {
              // 经营性资产类型
              this.getPieChart();

              //经营性资产概况
              this.get3dLineChart();
            }
          });
        }
      });
    },

    getLeaseUserTotal() {
      leaseUserTotal().then((res) => {
        if (res.code == 200) {
          this.userTotalInfo = res.data;
        }
      });
    },

    getCockpitPropertyLandareaList() {
      let params = {
        propertyCategoryId: undefined,
        ownershipId: undefined,
        manageDeptId: undefined,
        propertyCommunity: undefined,
      };
      cockpitPropertyLandareaList(params).then((res) => {
        if (res.code == 200) {
          this.landareaInfo = res.data;
        }
      });
    },

    getInnerScreenPropertyList() {
      let params = {
        propertyTypeCode: undefined,
        propertyName: undefined,
        propertyCommunity: undefined,
      };
      innerScreenPropertyList(params).then((res) => {
        if (res.code == 200) {
          this.classificationUnitList = res.data;
          this.setSpotsList();
        }
      });
    },
    getUserList() {
      userList().then((res) => {
        if (res.code == 200) {
          this.leaseUserList = res.data;
        }
      });
    },
    // 全屏
    toggleFullScreen() {
      if (this.$refs.screen) {
        this.isFullScreen = true;
        this.$refs.screen.requestFullscreen();
      }
    },
    dbClick() {
      this.$router.push({
        path: "/screen/index",
        query: { isFullScreen: this.isFullScreen },
      });
    },
    setSpotsList() {
      // if (this.markerList.length && this.map) {
      //   let _markerList = [];
      //   this.markerList.map((_v) => {
      //     if (_v.marker) {
      //       _markerList.push(_v.marker);
      //     }
      //   });
      //   this.map.remove(_markerList);
      //   this.markerList = [];
      // }

      this.classificationUnitList.map((_v) => {
        if (_v.propertyGisLongitude && _v.propertyGisLatitude) {
          let icon;
          if (_v.businessNature == 1) {
            if (_v.propertyCategoryId == 1) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/shi-jy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            } else if (_v.propertyCategoryId == 2) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/she-jy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            } else if (_v.propertyCategoryId == 3) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/guo-jy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            }
          } else {
            if (_v.propertyCategoryId == 1) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/shi-fjy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            } else if (_v.propertyCategoryId == 2) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/she-fjy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            } else if (_v.propertyCategoryId == 3) {
              icon = new AMap.Icon({
                image: require("@/assets/screen/guo-fjy.png"), // 图标的图片 URL
                size: new AMap.Size(30, 38), //图标所处区域大小
                imageSize: new AMap.Size(30, 38), //图标大小
              });
            }
          }

          _v.marker = new AMap.Marker({
            map: this.map,
            anchor: "bottom-center",
            position: [_v.propertyGisLongitude, _v.propertyGisLatitude],
            extData: _v,
            offset: new AMap.Pixel(-17, -5),
            icon: icon,
            // content: '', //设置文本标注内容
          });
          _v.markerTextStatus = false;
        }
      });

      // this.markerList = this.classificationUnitList;
    },
    mapshow() {
      //定义地图中心点坐标
      this.map = new AMap.Map(document.getElementById("mapContainer"), {
        center: [119.026695, 31.687942],
        // zoom: 16,
        features: ["bg", "road", "point", "building"],
        showLabel: true,
        rotateEnable: false,
        pitchEnable: false,
        zoom: 13,
        pitch: 65,
        // rotation: 45,
        // viewMode: "3D", // 开启3D视图,默认为关闭
        zooms: [2, 20],
        // mapStyle: "amap://styles/grey",
      });

      // 获取地图容器的大小
      const mapContainer = this.map.getContainer();
      const mapWidth = mapContainer.offsetWidth;
      console.log("地图容器宽度", mapWidth);
      const mapHeight = `calc(100vh)`;
      // 添加一层样式到地图上
      const customStyleDiv = document.createElement("div");
      customStyleDiv.style.position = "absolute";
      customStyleDiv.style.top = "0";
      customStyleDiv.style.left = "0";
      customStyleDiv.style.width = mapWidth + 25 + "px";
      customStyleDiv.style.height = mapHeight;
      customStyleDiv.style.pointerEvents = "none"; // 防止该层样式干扰地图的交互
      customStyleDiv.style.boxShadow = "50px 50px 500px #000 inset";
      mapContainer.appendChild(customStyleDiv);
    },
    initLoadMap() {
      this.styleType = "Satellite";
      // 切换地图样式
      this.layers = new AMap.TileLayer.Satellite({ map: this.map });
      this.layers && this.layers.show();
    },

    getPanelChart() {
      this.chartPanel = echarts.init(document.getElementById("panelChart"));

      let params = {
        propertyCategoryId: undefined,
        ownershipId: undefined,
        manageDeptId: undefined,
        propertyCommunity: undefined,
      };
      cockpitBuildingRegister(params).then((res) => {
        if (res.code == 200) {
          this.buildingRegisterAreaInfo = res.data;

          let sum =
            (this.buildingRegisterAreaUseInfo &&
              this.buildingRegisterAreaUseInfo.freeAreaTotal) +
            (this.buildingRegisterAreaInfo &&
              this.buildingRegisterAreaInfo.businessBuildingAreaAllTotal);

          let per = (
            this.buildingRegisterAreaUseInfo &&
            this.buildingRegisterAreaUseInfo.freeAreaTotal / sum
          ).toFixed(2);
          let value = per;
          let color = [
            [value, "#3a63b6"],
            [1, "#6ce9eb"],
          ];
          let option = {
            // backgroundColor: "none",
            tooltip: {
              formatter: "{b}{c}",
            },
            series: [
              {
                tooltip: {
                  show: false,
                },
                name: "wrap",
                type: "pie",
                hoverAnimation: false,
                legendHoverLink: false,
                center: ["50%", "45%"],
                radius: ["2%", "3%"],
                z: 5,
                label: {
                  normal: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    show: false,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  {
                    value: 100,
                    itemStyle: {
                      normal: {
                        color: "#24D8E7",
                      },
                      emphasis: {
                        color: "#24D8E7",
                      },
                    },
                  },
                ],
              },
              {
                name: "占比",
                type: "gauge",
                radius: "95%",
                min: 0,
                max: 1,
                center: ["50%", "45%"],
                data: [
                  {
                    value: value,
                    name: "占比",
                  },
                ],
                splitNumber: 5, //刻度数量
                startAngle: 180,
                endAngle: 0,
                z: 5,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 0,
                    color: color,
                  },
                }, //仪表盘轴线
                axisLabel: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  distance: -50,
                  formatter: (params) => {
                    var value = params.toFixed(2);
                    if (value == 0.0) {
                      return (
                        "{aTitle|待盘活面积：}{aValue|" +
                        (per * 100).toFixed(0) +
                        "%}"
                      );
                    } else if (value == 1.0) {
                      return (
                        "{bTitle|已盘活面积：}{bValue|" +
                        (100 - per * 100).toFixed(0) +
                        "%}"
                      );
                    } else {
                      return "";
                    }
                  },
                  rich: {
                    aTitle: {
                      color: "#3a63b6",
                      padding: [30, 5, 0, 5],
                      fontSize: 14,
                    },
                    aValue: {
                      color: "#fff",
                      padding: [30, 0, 0, 0],
                      fontSize: 14,
                    },
                    bTitle: {
                      color: "#6ce9eb",
                      padding: [30, 0, 0, 0],
                      fontSize: 14,
                    },
                    bValue: {
                      color: "#fff",
                      padding: [30, 0, 0, 0],
                      fontSize: 14,
                    },
                  },
                }, //刻度标签。
                axisTick: {
                  splitNumber: 10,
                  show: true,
                  lineStyle: {
                    color: "auto",
                    width: 3,
                  },
                  length: 15,
                }, //刻度样式
                splitLine: {
                  show: true,
                  length: 15,
                  lineStyle: {
                    color: "auto",
                    width: 3,
                  },
                }, //分隔线样式

                itemStyle: {
                  normal: {
                    color: "#fff", //指针颜色
                  },
                },
                pointer: {
                  width: 10,
                  length: "60%",
                },
                detail: {
                  formatter: function (params) {
                    return (params * 100).toFixed(0) + "%";
                  },
                  fontSize: 50,
                  color: "#fff",
                  offsetCenter: ["0%", "-35%"],
                  show: false,
                },
                title: {
                  offsetCenter: ["0", "-60%"],
                  fontSize: 40,
                  color: "#fff",
                  show: false,
                },
              },
            ],
          };
          option && this.chartPanel.setOption(option);

          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            this.chartPanel.resize();
          });
        }
      });
    },
    getPieChart() {
      this.chartPie = echarts.init(document.getElementById("pieChart"));
      const typeList = this.buildingRegisterAreaInfo.list
        .filter((v) => v.businessNature === 1)
        .map((j) => j.propertyTypeName);
      //  ["商铺", "公寓", "办公", "综合体", "工业厂房"]; // 类型
      const valueList = this.buildingRegisterAreaInfo.list
        .filter((v) => v.businessNature === 1)
        .map((j) => j.buildingAreaTotal);
      //  [350, 150, 60, 120, 360];
      /* 数据处理 */
      let data = [];
      // 空格数据
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 178, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(0, 114, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(52, 218, 181, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(15, 200, 159, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(145, 52, 218, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(145, 52, 218, 0.6)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(244, 198, 161, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(236, 155, 112, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 159, 151, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(254, 69, 53, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: "50%",
            color: colorList[i],
          },
          label: {
            show: true,
            lineHeight: 32,
            padding: [0, -50, 0, -50],
            formatter: (params) => {
              let index = typeList.indexOf(params.name);
              return `{percent|${((valueList[index] / sum) * 100).toFixed(
                2
              )}%}`;
            },
            rich: {
              percent: {
                fontSize: 16,
                fontFamily: "PangMenZhengDao",
                fontWeight: 400,
                color: "#00EAFF",
                align: "right",
                verticalAlign: "top",
              },
            },
          },
          labelLine: {
            show: true,
            length: 18,
            length2: 60,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        // data.push(gapData);
      }
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "10",
          itemWidth: 10,
          itemHeight: 10,
          show: true,
          itemGap: 20,
          textStyle: {
            color: "#fff",
            fontSize: 11,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "60%"],
            center: ["40%", "40%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      option && this.chartPie.setOption(option);

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
    get3dLineChart() {
      this.chart3DLine = echarts.init(document.getElementById("3dLineChart"));
      var xData2 = this.buildingRegisterAreaInfo.list
        .filter((v) => v.businessNature === 1)
        .map((j) => j.propertyTypeName);
      var data1 = this.buildingRegisterAreaInfo.list
        .filter((v) => v.businessNature === 1)
        .map((j) => j.buildingAreaTotal);
      let max = Math.max(...data1);
      var data2 = Array(xData2.length).fill(max);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          // orient: "vertical",
          right: "center",
          top: "10px",
          itemWidth: 15,
          itemHeight: 15,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 11,
          },
        },
        grid: {
          right: 50,
          left: 70,
          top: 40,
          bottom: 80,
        },
        xAxis: {
          data: xData2,
          // splitLine: {
          //   show: true,
          // },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#B8D3F1",
              fontSize: 14,
            },
            margin: 15, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#333c55",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#B8D3F1",
                fontSize: 12,
              },
            },
          },
          {
            name: "",
            splitNumber: 5,
            type: "value",
            // nameTextStyle: {
            //   color: "#fff",
            //   fontSize: 12,
            //   align: "center",
            //   padding: [0, 0, 0, 25],
            // },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            //三个最低下的圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 15],
            symbolOffset: [0, 5],
            z: 12,
            tooltip: {
              show: false,
            },
            itemStyle: {
              opacity: 1,
              color: echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#12B9DB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#6F8EF2", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            data: [1, 1, 1, 1, 1],
          },

          //下半截柱状图
          {
            name: "资产类型",
            type: "bar",
            barWidth: 30,
            barGap: "-100%",
            itemStyle: {
              //lenged文本
              opacity: 0.7,
              color: echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#12B9DB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#6F8EF2", // 100% 处的颜色
                  },
                ],
                false
              ),
            },

            data: data1,
          },

          {
            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            name: "资产类型",
            type: "bar",
            barWidth: 30,
            barGap: "-100%",
            // stack: "广告",
            itemStyle: {
              //lenged文本
              opacity: 0.7,
              color: echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#12B9DB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#6F8EF2", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            data: data1,
          },

          {
            name: "", //头部
            type: "pictorialBar",
            symbolSize: [30, 15],
            symbolOffset: [0, -5],
            z: 12,
            tooltip: {
              show: false,
            },
            symbolPosition: "end",
            itemStyle: {
              color: "#163F7A",
              opacity: 1,
            },
            data: data2,
          },

          {
            name: "资产类型",
            type: "pictorialBar",
            symbolSize: [30, 15],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#12B9DB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#6F8EF2", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            symbolPosition: "end",
            data: data1,
          },

          {
            name: "资产类型",
            type: "bar",
            barWidth: 30,
            barGap: "-100%",
            z: 0,
            tooltip: {
              show: false,
            },
            itemStyle: {
              color: "#163F7A",
              opacity: 0.7,
            },

            data: data2,
          },
        ],
      };
      option && this.chart3DLine.setOption(option);

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.chart3DLine.resize();
      });
    },
    getLineChart() {
      this.chartLine = echarts.init(document.getElementById("lineChart"));

      let option = {
        tooltip: {},
        legend: {
          right: "10px",
          itemWidth: 15,
          itemHeight: 15,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 11,
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [...new Set(this.rentYearList.map((v) => v.propertyTypeName))],
          axisLabel: {
            formatter: "{value}",
            color: "#BCCDEB", // 文本颜色
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            //   去网格线
            splitLine: {
              show: false,
            },
            type: "value",
            name: "",
            // 标题名称颜色

            axisLine: {
              // show: false ,// 去除轴线
              lineStyle: {
                lineStyle: {
                  color: "#BCCDEB",
                },
              },
            },
            axisLabel: {
              formatter: "{value}",
              color: "#BCCDEB", // 文本颜色
            },
          },
        ],
        series: [
          {
            name: "自然人",
            type: "bar",
            stack: "account",
            barMaxWidth: 12,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFE196",
                  },
                  {
                    offset: 1,
                    color: "rgba(253,240,167,0.2)",
                  },
                ],
              },
            },
            data: this.rentYearList
              .filter((v) => v.leaseUserType === 2)
              .map((j) => j.rentAmount),
          },
          {
            name: "企业",
            type: "bar",
            stack: "account",
            barMaxWidth: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83ABFF" },
                { offset: 1, color: "rgba(70,130,255,0.2)" },
              ]),
            },
            data: this.rentYearList
              .filter((v) => v.leaseUserType === 1)
              .map((j) => j.rentAmount),
          },
        ],
      };
      option && this.chartLine.setOption(option);

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.screen {
  width: 98%;
  height: calc(100vh - 90px);
  margin: 15px auto 0;
  position: relative;
  overflow: hidden;
  background: url("../../assets/screen/screen-bg.png");
  background-repeat: no-repeat;

  #mapContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 300px #000 inset !important;
  }
  .header {
    position: relative;
    height: 90px;
    width: 95%;
    margin: -2px auto;
    z-index: 1004;
    img {
      width: 100%;
      height: auto;
    }
    .time {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #fff;
      font-size: 20px;
      margin-right: 100px;
      margin-top: 20px;
      span {
        padding-left: 13px;
      }
    }
  }
  .full {
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
    cursor: pointer;
  }
  .screen-top {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .screen-top-left {
      display: flex;
      align-items: center;
      .top-left-lt {
        width: 25%;
        height: 78px;
      }
      .top-left-item {
        width: 80%;
        height: 100px;
        margin-right: 10px;
        position: relative;
      }
      img {
        width: 90%;
      }
    }
    .screen-top-middle {
      width: 42%;
      height: 98px;
      padding-top: 60px;
      position: relative;
      margin-right: 20px;
      img {
        width: 100%;
      }
      .screen-top-middle-info {
        width: 100%;
        display: flex;
        color: #fff;
        position: absolute;
        top: 5px;
        left: 20px;
        .info-item {
          .item-style {
            width: 100%;
            text-align: center;
          }

          &:nth-child(1) {
            width: 33%;
            font-size: 28%;
            text-align: center;
            position: relative;
            left: 0;
            top: 20px;
            .info-item-num {
              font-size: 24px;
              font-weight: 600;
              margin-left: -10px;
              position: absolute;
              top: -10px;
              left: 0;
              span {
                font-size: 15px;
                font-weight: 500;
              }
            }
            .info-item-font {
              background-image: url("../../assets/screen/screen-cz-bg.png");
              background-repeat: no-repeat;
              background-size: 80% 100%;
              padding: 5px 0;
              margin-left: -47px;
              margin-top: 10px;
              font-size: 14px;
              span {
                font-size: 12px;
              }
            }
          }
          &:nth-child(2) {
            width: 40%;
            font-size: 42%;
            text-align: center;
            margin-top: -25px;
            position: relative;
            top: 10px;
            left: 0px;
            .info-item-num {
              font-size: 36px;
              font-weight: 600;
              margin-left: 0;
              position: absolute;
              top: 0;
              left: 11%;
            }
            .info-item-font {
              background-image: url("../../assets/screen/screen-use-bg.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              padding: 5px 0;
              margin-top: 5px;
              font-size: 14px;
              // margin-right: 30px;
              position: absolute;
              bottom: -3px;
              left: 0;
              width: 87%;
            }
          }
          &:nth-child(3) {
            width: 33%;
            font-size: 28%;
            text-align: center;
            position: relative;
            left: 21px;
            top: 20px;
            .info-item-num {
              font-size: 24px;
              font-weight: 600;
              margin-left: 0;
              position: absolute;
              top: -10px;
              left: -6px;
              span {
                font-size: 15px;
                font-weight: 500;
              }
            }
            .info-item-font {
              background-image: url("../../assets/screen/screen-cz-bg.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              padding: 5px 0;
              margin-left: -30px;
              margin-top: 10px;
              font-size: 14px;
              span {
                font-size: 12px;
              }
            }
          }
        }
        .info-item-blue {
          width: 80%;
        }
        .info-item-yellow {
          width: 70%;
        }
        img {
          width: 100%;
        }
      }
    }
    .screen-top-right {
      display: flex;
      align-items: center;
      .top-left-lt {
        width: 25%;
        height: 78px;
      }
      .top-left-item {
        width: 80%;
        height: 100px;
        margin-left: 10px;
        position: relative;
      }
      img {
        width: 90%;
      }
    }

    .data-info {
      position: absolute;
      top: 20px;
      left: 96px;

      .data-info-title {
        font-size: 11px;
        color: #bccdeb;
        line-height: 13px;
      }

      .data-info-num {
        color: #23b9ff;
        font-size: 20px;
        font-weight: 600;
        margin-top: -5px;
      }
    }
  }
  .screen-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .screen-bottom-left {
      width: 25%;
      margin-left: 25px;
      // margin-top: 55px;
      .bottom-left-top {
        width: 100%;
        height: calc(50vh - 190px);
        background-image: url("../../assets/screen/screen-zc.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 15px;
        position: relative;
        .bottom-left-top-inner {
          width: 100%;
          position: absolute;
          top: 75%;
          left: 15px;
          display: flex;
          .bottom-left-top-inner-left {
            color: #fff;
            width: 50%;
            text-align: center;
            .num {
              font-size: 30px;
            }
            .label {
              font-size: 18px;
            }
          }
          .bottom-left-top-inner-right {
            .bottom-left-top-inner-right-item {
              &:nth-child(1) {
                display: flex;
                align-items: center;
                p {
                  margin: 0;
                  color: #fff;
                  &:nth-child(1) {
                    color: #3a63b6;
                    width: 100px;
                  }
                }
              }
              &:nth-child(2) {
                display: flex;
                align-items: center;
                p {
                  margin-top: 10px;
                  color: #fff;
                  &:nth-child(1) {
                    color: #6ce9eb;
                    width: 100px;
                  }
                }
              }
            }
          }
        }
      }
      .bottom-left-bottom {
        width: 100%;
        height: calc(50vh - 190px);
        background-image: url("../../assets/screen/screen-zc.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
      }
    }
    .screen-bottom-middle {
      width: 45%;
      position: relative;
      .bottom-middle-top {
        width: 100%;
        height: calc(50vh - 155px);
        border-top: 1px solid #23b9ff;
        border-bottom: 1px solid #23b9ff;

        margin-top: 55px;
        margin-bottom: 15px;
        .full {
          position: absolute;
          top: 50px;
          right: -5px;
        }
      }
      .bottom-middle-bottom {
        width: 100%;
        height: calc(50vh - 224px);
        background-image: url("../../assets/screen/screen-zc.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .banner {
          // position: absolute;
          // bottom: 18px;
          // left: 70px;
          z-index: 0;
          width: 80%;
          img {
            width: 100%;
          }
        }
      }
    }
    .screen-bottom-right {
      width: 25%;
      margin-right: 25px;
      // margin-top: 55px;
      .bottom-right-top {
        width: 100%;
        height: calc(50vh - 190px);
        background-image: url("../../assets/screen/screen-zc.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 15px;
        position: relative;
        .year-choose {
          margin-left: 4%;
        }
        .inner-info {
          display: flex;
          align-items: center;
          border: 1px solid #23b9ff;
          background: rgba(35, 185, 255, 0.2);
          width: 92%;
          height: 20%;
          margin: 0 auto;
          .inner-info-icon {
            height: 80%;
            margin-left: 10px;
            img {
              width: 100%;
            }
          }
          .inner-info-num {
            display: flex;
            align-items: center;
            span {
              &:nth-child(1) {
                font-size: 18px;
                color: #ffffff;
                padding: 0 10px;
              }
              &:nth-child(2) {
                font-size: 28px;
                color: #12e4f5;
                font-weight: 600;
              }
            }
          }
          .inner-info-qushi {
            display: flex;
            align-items: center;
            padding-left: 30px;
            .low-up {
              width: 70px;
              font-size: 12px;
              color: #ffffff;
              margin-left: 2px;
            }
          }
        }
      }
      .bottom-right-bottom {
        width: 100%;
        height: calc(50vh - 190px);
        background-image: url("../../assets/screen/screen-zc.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .inner-info {
          display: flex;
          align-items: center;
          border: 1px solid #23b9ff;
          background: rgba(35, 185, 255, 0.2);
          width: 92%;
          height: 20%;
          margin: 0 auto;
          .inner-info-icon {
            height: 80%;
            margin-left: 10px;
            img {
              width: 100%;
            }
          }
          .inner-info-num {
            display: flex;
            align-items: center;
            span {
              &:nth-child(1) {
                font-size: 18px;
                color: #ffffff;
                padding: 0 20px 0 10px;
              }
              &:nth-child(2) {
                font-size: 30px;
                color: #12e4f5;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
    .screen-title {
      margin-bottom: 5px;
      margin-top: 7px;
      position: relative;
      img {
        width: 90%;
        height: 40px;
      }
      p {
        position: absolute;
        top: -22px;
        left: 23px;
        font-size: 24px;
        color: #fff;
      }
    }
    .title1,
    .title {
      font-size: 20px;
      color: #97cdff;
      // padding: 2.5% 0 0 65px;
      height: 19%;
    }
  }
}
</style>

<style lang="scss">
@media screen and (max-height: 990px) {
  .screen-bottom {
    .title {
      padding: 2.5% 0 0 65px;
    }
    .title1 {
      padding: 1% 0 0 65px;
    }
    .inner-info {
      .inner-info-icon {
        width: 10%;
      }
    }
    .inner-chart {
      width: 92%;
      height: 50%;
      margin: 1% auto 0;
      table {
        width: 100%;
        border: none;
        .line {
          border-bottom: 1px solid #38415a;
        }
        tr {
          border: none;
          padding: 0;

          &:nth-child(1) {
            color: #fff;
            background: #043272;
            height: 20px;
            line-height: 20px;
            th {
              &:nth-child(1) {
                width: 20%;
              }
              &:nth-child(2) {
                width: 40%;
              }
              &:nth-child(3) {
                width: 40%;
              }
            }
          }
        }
        tr {
          &:nth-child(2) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #ff7734;
                  background: rgba(255, 119, 52, 0.5);
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
          &:nth-child(3) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #ffc700;
                  background: rgba(250, 195, 0, 0.5);
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
          &:nth-child(4) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #34ffe7;
                  background: rgba(52, 255, 206, 0.5);
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
        }
        .num {
          width: 20%;
          text-align: center;
          padding: 1px 0;
          border-bottom: 1px solid #333c55;

          span {
            width: 30px;
            height: 30px;
            line-height: 30px;
            color: #00a3ff;
            display: block;
            margin: 2px auto;
            border: 1px solid #00a3ff;
            background: rgba(0, 190, 250, 0.1);
          }
        }
        .name {
          width: 40%;
          text-align: center;
          color: #fff;
          padding: 1px 0;
          border-bottom: 1px solid #333c55;
        }
        .price {
          width: 40%;
          text-align: center;
          color: #fff;
          padding: 1px 0;
          border-bottom: 1px solid #333c55;
        }
      }
    }
    .bottom-middle-bottom {
      .line-chart {
        height: 25vh !important;
        z-index: 1;
      }
    }
  }

  .banner {
    position: absolute;
    bottom: 18px;
    left: 70px;
    z-index: 0;
    width: 80%;
    img {
      width: 100%;
    }
  }

  .xx {
    position: absolute;
    top: 0;
    right: 0;
    height: 35px;
    width: 15%;
    img {
      width: 100%;
    }
  }
  .icon {
    position: absolute;
    top: 6px;
    left: 25px;
    width: 25px;
    height: 25px;
    img {
      width: 100%;
    }
  }

  .xx1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 35px;
    width: 25%;
    img {
      width: 100%;
    }
  }
  .icon1 {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 25px;
    height: 25px;
    img {
      width: 100%;
    }
  }
}
// @media screen and (min-height: 991px) and (max-height: 1050px) {
//   .screen-bottom {
//     .title {
//       padding: 3.5% 0 0 65px;
//     }
//     .inner-info {
//       .inner-info-icon {
//         width: 13%;
//       }
//     }
//     .inner-chart {
//       width: 92%;
//       height: 53%;
//       margin: 2% auto 0;
//       table {
//         width: 100%;
//         border: none;
//         .line {
//           border-bottom: 1px solid #38415a;
//         }
//         tr {
//           border: none;
//           padding: 0;

//           &:nth-child(1) {
//             color: #fff;
//             background: #043272;
//             th {
//               &:nth-child(1) {
//                 width: 20%;
//               }
//               &:nth-child(2) {
//                 width: 40%;
//               }
//               &:nth-child(3) {
//                 width: 40%;
//               }
//             }
//           }
//         }
//         tr {
//           &:nth-child(2) {
//             td {
//               &:nth-child(1) {
//                 span {
//                   border: 1px solid #ff7734;
//                   background: rgba(255, 119, 52, 0.5);
//                   width: 20px;
//                   height: 20px;
//                   color: #fff;
//                   display: block;
//                   margin: 2px auto;
//                 }
//               }
//             }
//           }
//           &:nth-child(3) {
//             td {
//               &:nth-child(1) {
//                 span {
//                   border: 1px solid #ffc700;
//                   background: rgba(250, 195, 0, 0.5);
//                   width: 20px;
//                   height: 20px;
//                   color: #fff;
//                   display: block;
//                   margin: 2px auto;
//                 }
//               }
//             }
//           }
//           &:nth-child(4) {
//             td {
//               &:nth-child(1) {
//                 span {
//                   border: 1px solid #34ffe7;
//                   background: rgba(52, 255, 206, 0.5);
//                   width: 20px;
//                   height: 20px;
//                   color: #fff;
//                   display: block;
//                   margin: 2px auto;
//                 }
//               }
//             }
//           }
//         }
//         .num {
//           width: 20%;
//           text-align: center;
//           padding: 3px 0;
//           border-bottom: 1px solid #333c55;

//           span {
//             width: 20px;
//             height: 20px;
//             color: #00a3ff;
//             display: block;
//             margin: 2px auto;
//             border: 1px solid #00a3ff;
//             background: rgba(0, 190, 250, 0.1);
//           }
//         }
//         .name {
//           width: 40%;
//           text-align: center;
//           color: #fff;
//           padding: 3px 0;
//           border-bottom: 1px solid #333c55;
//         }
//         .price {
//           width: 40%;
//           text-align: center;
//           color: #fff;
//           padding: 3px 0;
//           border-bottom: 1px solid #333c55;
//         }
//       }
//     }
//   }
//   .banner {
//     position: absolute;
//     bottom: 34px;
//     left: 70px;
//     z-index: 0;
//     width: 80%;
//     img {
//       width: 100%;
//     }
//   }
// }
@media screen and (min-height: 1051px) {
  .screen-bottom {
    .title {
      padding: 3.5% 0 0 65px;
    }
    .title1 {
      padding: 2.5% 0 0 65px;
    }
    .title2 {
      padding: 5% 0 0 65px;
    }
    .inner-info {
      .inner-info-icon {
        width: 13%;
      }
    }
    .xx {
      position: absolute;
      top: 0;
      right: 0;
      height: 30px;
      width: 28%;
      img {
        width: 100%;
      }
    }
    .icon {
      position: absolute;
      top: 16px;
      left: 25px;
      width: 30px;
      height: 30px;
      img {
        width: 100%;
      }
    }

    .xx1 {
      position: absolute;
      top: 0;
      right: 0;
      height: 35px;
      width: 35%;
      img {
        width: 100%;
      }
    }
    .icon1 {
      position: absolute;
      top: 12px;
      left: 25px;
      width: 30px;
      height: 30px;
      img {
        width: 100%;
      }
    }
    .icon2 {
      position: absolute;
      top: 18px;
    }
    .inner-chart {
      width: 92%;
      height: 53%;
      margin: 2% auto 0;
      table {
        width: 100%;
        border: none;
        .line {
          border-bottom: 1px solid #38415a;
        }
        tr {
          border: none;
          padding: 0;

          &:nth-child(1) {
            color: #fff;
            background: #043272;
            height: 30px;
            line-height: 30px;
            th {
              &:nth-child(1) {
                width: 20%;
              }
              &:nth-child(2) {
                width: 40%;
              }
              &:nth-child(3) {
                width: 40%;
              }
            }
          }
        }
        tr {
          &:nth-child(2) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #ff7734;
                  background: rgba(255, 119, 52, 0.5);
                  width: 20px;
                  height: 20px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
          &:nth-child(3) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #ffc700;
                  background: rgba(250, 195, 0, 0.5);
                  width: 20px;
                  height: 20px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
          &:nth-child(4) {
            td {
              &:nth-child(1) {
                span {
                  border: 1px solid #34ffe7;
                  background: rgba(52, 255, 206, 0.5);
                  width: 20px;
                  height: 20px;
                  color: #fff;
                  display: block;
                  margin: 2px auto;
                }
              }
            }
          }
        }
        .num {
          width: 20%;
          text-align: center;
          padding: 3px 0;
          border-bottom: 1px solid #333c55;

          span {
            width: 20px;
            height: 20px;
            color: #00a3ff;
            display: block;
            margin: 2px auto;
            border: 1px solid #00a3ff;
            background: rgba(0, 190, 250, 0.1);
          }
        }
        .name {
          width: 40%;
          text-align: center;
          color: #fff;
          padding: 3px 0;
          border-bottom: 1px solid #333c55;
        }
        .price {
          width: 40%;
          text-align: center;
          color: #fff;
          padding: 3px 0;
          border-bottom: 1px solid #333c55;
        }
      }
    }
    .screen-bottom-left {
      .bottom-left-bottom {
        height: calc(50vh - 110px) !important;
        position: relative;
        .pie-chart {
          padding-top: 8%;
        }
      }
    }
    .bottom-middle-bottom {
      height: calc(50vh - 142px) !important;
      .line-chart {
        height: 31vh !important;
        z-index: 1;
      }
    }
  }
  .bottom-right-bottom {
    width: 100%;
    height: calc(50vh - 108px) !important;
    position: relative;
  }
  .banner {
    position: absolute;
    bottom: 34px;
    left: 70px;
    z-index: 0;
    width: 80%;
    img {
      width: 100%;
    }
  }
}
.screen {
  .year-choose {
    margin-top: 5px;
    .el-select {
      width: 85px;
      height: 24px;
    }
    .el-input--mini .el-input__inner {
      background: transparent;
      color: #fff;
      height: 24px;
      line-height: 24px;
    }
    .el-input--mini .el-input__icon {
      line-height: 24px;
    }
  }
}
>>> .assetName2 {
  min-width: 160px;
  min-height: 48px;
  line-height: 28px;
  color: #1b213b;
  z-index: 4;
  background: url("../../assets/screen/sign.png") no-repeat;
  background-size: cover;
  padding: 0 10px;
  text-align: center;
}
</style>
